<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <!-- 用户信息卡片 -->
      <el-col :span="6">
        <el-card class="user-card">
          <div class="user-info">
            <el-avatar :size="80" :src="userAvatar">
              {{ userInitials }}
            </el-avatar>
            <h3>{{ username }}</h3>
            <p>{{ email }}</p>
            <el-button type="primary" @click="goToProfile">编辑资料</el-button>
          </div>
        </el-card>
      </el-col>

      <!-- 统计数据卡片 -->
      <el-col :span="18">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card class="stat-card">
              <template #header>
                <div class="card-header">
                  <span>我的订单</span>
                  <el-button class="button" text>查看全部</el-button>
                </div>
              </template>
              <div class="stat-value">{{ stats.orderCount }}</div>
              <div class="stat-label">总订单数</div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="stat-card">
              <template #header>
                <div class="card-header">
                  <span>待付款</span>
                  <el-button class="button" text>去支付</el-button>
                </div>
              </template>
              <div class="stat-value">{{ stats.unpaidCount }}</div>
              <div class="stat-label">待付款订单</div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="stat-card">
              <template #header>
                <div class="card-header">
                  <span>待收货</span>
                  <el-button class="button" text>查看物流</el-button>
                </div>
              </template>
              <div class="stat-value">{{ stats.unreceivedCount }}</div>
              <div class="stat-label">待收货订单</div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 最近订单列表 -->
    <el-card class="recent-orders" style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          <span>最近订单</span>
          <el-button class="button" text>查看更多</el-button>
        </div>
      </template>
      <el-table :data="recentOrders" style="width: 100%">
        <el-table-column prop="orderNo" label="订单号" width="180" />
        <el-table-column prop="createTime" label="下单时间" width="180" />
        <el-table-column prop="totalAmount" label="订单金额" width="120">
          <template #default="scope">
            ¥{{ scope.row.totalAmount.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="订单状态">
          <template #default="scope">
            <el-tag :type="getOrderStatusType(scope.row.status)">
              {{ getOrderStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button text size="small" @click="viewOrderDetail(scope.row.orderNo)">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/user';
import { ElMessage } from 'element-plus';

const router = useRouter();
const userStore = useUserStore();

// 用户基本信息
const username = computed(() => userStore.currentUser?.username || '');
const email = computed(() => userStore.currentUser?.email || '');
const userAvatar = computed(() => userStore.currentUser?.avatar || '');

// 计算用户名首字母（用于没有头像时显示）
const userInitials = computed(() => {
  const name = username.value;
  return name ? name.charAt(0).toUpperCase() : '?';
});

// 统计数据
const stats = ref({
  orderCount: 0,
  unpaidCount: 0,
  unreceivedCount: 0
});

// 最近订单数据
const recentOrders = ref([
  {
    orderNo: 'ORDER2023001',
    createTime: '2023-12-01 10:00:00',
    totalAmount: 299.00,
    status: 'pending'
  },
  {
    orderNo: 'ORDER2023002',
    createTime: '2023-12-02 15:30:00',
    totalAmount: 599.00,
    status: 'paid'
  },
  {
    orderNo: 'ORDER2023003',
    createTime: '2023-12-03 09:15:00',
    totalAmount: 199.00,
    status: 'shipped'
  }
]);

// 获取订单状态对应的标签类型
const getOrderStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    pending: 'warning',
    paid: 'success',
    shipped: 'info',
    completed: 'success',
    cancelled: 'danger'
  };
  return statusMap[status] || 'info';
};

// 获取订单状态对应的文本
const getOrderStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    pending: '待付款',
    paid: '已付款',
    shipped: '已发货',
    completed: '已完成',
    cancelled: '已取消'
  };
  return statusMap[status] || status;
};

// 跳转到个人资料页面
const goToProfile = () => {
  router.push('/user');
};

// 查看订单详情
const viewOrderDetail = (orderNo: string) => {
  ElMessage.info(`查看订单详情：${orderNo}`);
  // TODO: 实现订单详情页面跳转
  // router.push(`/order/${orderNo}`);
};

// 页面加载时获取数据
onMounted(async () => {
  try {
    // TODO: 从API获取统计数据
    stats.value = {
      orderCount: 10,
      unpaidCount: 2,
      unreceivedCount: 3
    };
    
    // TODO: 从API获取最近订单数据
  } catch (error) {
    ElMessage.error('获取数据失败，请刷新页面重试');
  }
});
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.user-card {
  height: 100%;
}

.user-info {
  text-align: center;
  padding: 20px 0;
}

.user-info h3 {
  margin: 10px 0 5px;
  font-size: 18px;
}

.user-info p {
  color: #666;
  margin-bottom: 15px;
}

.stat-card {
  height: 180px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-value {
  font-size: 36px;
  font-weight: bold;
  color: #409EFF;
  text-align: center;
  margin: 20px 0 10px;
}

.stat-label {
  text-align: center;
  color: #666;
}

.recent-orders {
  margin-top: 20px;
}

.el-card {
  margin-bottom: 20px;
}
</style>